<template>
  <div id="app">
    <!-- 放置子组件内容的白盒子 -->
    <div class="checkContainer">
      <h3 class="title">请选择您的兴趣爱好</h3>
      <!-- 控制所有选项是否禁用 -->
      <button class="disabledAllBtn" @click="handleDisabledAll">{{ disabledAllText }}</button>
      <p class="title">设置禁用/解禁用选项的序号</p>
      <input class="inpNumber" type="text" v-model="inpDisabledNumr" />
      <button class="confirmBtn1" @click="handleDisabled">确定</button>
      <p class="title">设置默认已选中选项的序号【多个数字以空格分隔】</p>
      <input class="inpNumber" type="text" v-model="value" />
      <button class="confirmBtn2" @click="handleChecked">确定</button>
      <!-- 调用子组件 -->
      <!-- 此处的disable是控制所有选项是否禁用 -->
      <check-button :data="data" :disabled="disabled" :value="value" :show-value.sync="showValue"></check-button>
      <p class="title">当前选中了：{{ showValue }}</p>
      <hr />
      <input class="inpNumber" type="text" v-model="value2" />
      <check-button-2 :data="data" v-model="value2"></check-button-2>
    </div>
  </div>
</template>

<script>
import CheckButton from './components/CheckButton.vue';
import CheckButton2 from './components/CheckButton2.vue';
export default {
  components: { CheckButton, CheckButton2 },
  data() {
    return {
      // 自定义多选框列表数据
      data: [
        {
          label: '篮球',
          value: 1,
          // 控制单个选项是否禁用
          disabled: false
        },
        {
          label: '羽毛球',
          value: 2,
          disabled: false
        },
        {
          label: '乒乓球',
          value: 3,
          disabled: false
        },
        {
          label: '瑜伽',
          value: 4,
          disabled: false
        },
        {
          label: '烹饪',
          value: 5,
          disabled: false
        },
        {
          label: '唱歌',
          value: 6,
          disabled: false
        }
      ],
      // 控制全部选项是否禁用
      disabled: false,
      // 控制哪些多选框被选中
      value: '',
      value2: '',
      // 设置禁用/解禁的选项
      inpDisabledNumr: '',
      // 设置默认选中的选项
      showValue: ''
    };
  },
  methods: {
    handleDisabledAll() {
      this.disabled = !this.disabled;
    },
    handleDisabled() {
      if (this.inpDisabledNumr && Number.isInteger(this.inpDisabledNumr - 0) && this.inpDisabledNumr >= 0 && this.inpDisabledNumr <= this.data.length) {
        this.data[this.inpDisabledNumr - 1].disabled = !this.data[this.inpDisabledNumr - 1].disabled;
      } else {
        alert('请输入有效的数字！');
      }
    },
    handleChecked() {
      // todo 校验规则需完善
      if (this.value) {
        this.showValue = this.value;
      } else {
        alert('请输入有效的数字！');
      }
    }
  },
  computed: {
    disabledAllText() {
      if (this.disabled) {
        return '所有解除禁用';
      } else {
        return '所有选项禁用';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.checkContainer {
  position: relative;
  background-color: #fff;
  width: 450px;
  height: 450px;
  border: 1px solid #eee;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #eee;
  margin: auto;
  margin-top: 80px;
  overflow: auto;
}
.title {
  margin-left: 20px;
}
.disabledAllBtn {
  position: absolute;
  left: 50%;
  top: 4%;
  background: #ddd;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 6px;
}
.inpNumber {
  margin-left: 20px;
  width: 100px;
  height: 20px;
}
.confirmBtn1,
.confirmBtn2,
.confirmBtn3 {
  position: absolute;
  left: 31%;
  background: #ddd;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
}
.confirmBtn1 {
  top: 22.5%;
}
.confirmBtn2 {
  top: 40.5%;
}
.confirmBtn3 {
  top: 111%;
}
</style>
